<style lang="less" scoped>
    /*.main_allScroll {
        background-color: #5a8dff;
    }*/

    .bg {
        width: 100%;
        /*height: 16rem;*/
        /*background-image: url("../../assets/img/qixiNewZone_bg.png");*/
        /*background-size: 100% auto;*/
        /*background-repeat: no-repeat;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        z-index: -1;
        &>img{
            display: block;
            width: 100%;
            height: auto;
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            z-index: -1;
        }
    }

    .btn_bg {
        width: 4.75rem;
        /*height: 1.22rem;*/
        height: 0;
        background-image: url("../../assets/img/qixiNewZone_btnBg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .box {
        width: 100%;
        padding: 0 .32rem .5rem;
        margin-top: -2.6rem;
        li {
            width: 100%;
            margin-bottom: .36rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            &:last-child {
                margin-bottom: 0;
            }
            img {
                width: 100%;
                height: auto;
                text-align: center;
            }
        }
    }
</style>
<template>
    <div>
        <v-header :title="title">
            <div class="backs_icon" slot="left"></div>
        </v-header>
        <div class="main_allScroll" :style="{backgroundColor: bgColor}">
            <scroller :on-refresh="refresh" :on-infinite="loadMore ? infinite : getDone" ref="qixiZoomScroller">
                <div class="bg">
                    <img :src="banner" alt="">
                    <!--<div class="btn_bg"></div>-->
                </div>
                <ul class="box">
                    <li v-for="v in list" v-on:click="gotoPage(v)"><img :src="v.activityImageUrl" :alt="v.templateActivityDescribe"></li>
                </ul>
            </scroller>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'qixiZone',
        data() {
            return {
                list: [],
                loadMore: false,
                pageNum: 1,
                scrollPos: 0,
                banner: '',
                title:'',
                bgColor:'transparent'
            }
        },
        activated() {
            this.init()
        },
        deactivated: function(){
            this.scrollPos = this.$refs.qixiZoomScroller.getPosition().top
        },
        methods: {
            createInit() {
                this.list = []
                this.loadMore = false
                this.pageNum = 1
                this.scrollPos= 0
            },
            init() {
                // this.title = this.$route.query.t
                if(this.$router.isToNext){
                    this.list = []
                    this.loadMore = false
                    this.pageNum = 1
                    this.scrollPos= 0
                    this.banner =  ''
                    this.bgColor =  'transparent'
                    this.getTemplateActivityRelationListForUser()
                    this.getBanner()
                }else{
                    if(this.scrollPos != 0){
                        setTimeout(() => this.$refs.qixiZoomScroller.scrollTo(0, this.scrollPos, false), 10)
                    }
                }

            },
            getBanner () {
                this.$ajax.getBanner({
                    pageSize: 1,
                    pageNum: 1,
                    location: this.$route.query.bgLocation || 8,
                    queryType: 'App'
                })
                    .then((res)=>{
                        if(res.body.content.list.length >= 1){
                            this.banner = res.body.content.list[0].bannerImg
                            this.bgColor = res.body.content.list[0].bgColor
                            this.title = res.body.content.list[0].title || this.$route.query.t
                            this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: res.body.content.list[0].title, activityId: this.$route.query.activityId}})
                        }
                    })
            },
            getTemplateActivityRelationListForUser(done) {
                this.$ajax.activity.getTemplateActivityRelationListForUser({
                    pageNum: this.pageNum,
                    pageSize: 15,
                    activityId: this.$route.query.activityId || '473442807801970688',
                })
                    .then((res) => {
                        if (done) {
                            done()
                        }
                        let type = Object.prototype.toString.call(res.body.content.list) === '[object Array]';
                        if(!type){
                            return
                        }
                        if(this.pageNum == 1){
                            this.list = res.body.content.list
                        }else{
                            this.list = this.list.concat(res.body.content.list)
                        }
                        if (res.body.content.list.length < 15) {
                            this.loadMore = false
                        } else {
                            this.loadMore = true
                            this.pageNum++
                        }
                    })
            },
            gotoPage(data) {
                this.$router.push("/home/product_details?type=3" + "&templateId=" + data.templateId + "&activityId=" + this.$route.query.activityId)
            },
            refresh(done) {
                // this.init()
                global.myLoad = true
                this.createInit()
                this.$refs.qixiZoomScroller.resize()
                this.getTemplateActivityRelationListForUser(done)
                this.getBanner()
            },
            infinite (done) {
                global.myLoad = true
                this.$refs.qixiZoomScroller.resize()
                this.loadMore = false
                this.getTemplateActivityRelationListForUser(done)
            },
            getDone(done) {
                this.$refs.qixiZoomScroller.finishInfinite(2);
            },
        },


    }
</script>